/*
  学习目标：使用useEffect发请求
  前置: 下载axios
  前置: src/utils/request.js封装请求基地址
*/

import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from './api/channel';

export default function App() {
  // 2. 声明状态， 保存数据
  const [list, setList] = useState([]);
  // 3. 挂载后发请求
  const loadData = async () => {
    const res = await getChannelsAPI();
    setList(res.data.channels);
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      <ul>
        {/* // 4. 渲染数据 */}
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}
